<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='../vue.js'></script>
</head>

<body>
    <div id='app'>
        <h1>{{msg}}</h1>
    </div>
    <script>
        const vm = new Vue({
            /*
            -data配置项可以是Object 也可以是Function ,但是在组件中必须使用function格式

            组件中data为什么是一个函数而不是对象
            -当一个组件被定义，data必须声明为返回一个初始数据的函数，因为组件可能被用来创建多个实例。
            如data仍然是一个纯粹的对象，则所有的例将共享引用同一个数据对象，通过提供data函数，每次
            创建一个新实例后，我们能够调用data函数，从而返回初始数据的一个全新副本数据对象。
            */ 
            
            el: '#app',
            // data:{
            //     msg:"hello vue",
            // }
            data() {
                return {
                    msg: 'Hello Vue',
                    study: 'vue'
                }
            }
        })
    </script>
</body>

</html>